<template>
  <div>
    <div>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="2">我发布的</el-menu-item>
        <el-menu-item index="3">我预约的</el-menu-item>
        <el-menu-item index="1">我卖出的</el-menu-item>
        <el-menu-item index="4">草稿</el-menu-item>
      </el-menu>
    </div>
    <div class="carInfo">
      <el-empty description="暂无数据" v-if="!carlist[0]"></el-empty>
      <div v-else v-for="(i, l) in carlist" :key="l" class="boder">
        <el-row>
          <el-col :span="7">
            <div class="grid-content bg-purple-dark">
              <el-image
                style="width: 300px; height: 200px"
                :src="'http://www.yocar.website:8080/yoche/img/' + i.car.photo[0]"
                fit="cover"
              >
                <div slot="error" class="image-slot">
                  <h6>暂无照片</h6>
                </div>
              </el-image>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-dark">
              <h4>发布编号：{{ i.id }}</h4>
              <h4>车辆编号：{{ i.car.id }}</h4>
              <h5>品牌：{{ i.car.brand }}</h5>
              <h5>
                价格：<span>￥{{ i.car.price }}万元</span>
              </h5>
            </div>
          </el-col>
          <el-col :span="7" v-if="getUserCar.stateCode == 4">
            <div class="button">
              <el-button type="primary" @click="visible(i.id)">上传图片并发布</el-button>
            </div>
          </el-col>
          <el-col :span="7" v-if="getUserCar.stateCode == 2">
            <div class="buttondiv">
              <el-button type="primary" size="small" @click="sellper(i.car.id)">卖出</el-button>
              <el-button type="primary" size="small" @click="$router.push({ name: 'editorcar', params: i })"
                >编辑</el-button
              >
              <el-button type="primary" size="small" @click="remove(i.car.id)">下架</el-button>
            </div>
          </el-col>
          <el-col :span="7" v-if="getUserCar.stateCode == 3">
            <div class="button">
              <el-button type="primary" @click="cancelreserve(i.car.id)">取消预约</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-drawer
      title="上传照片"
      :visible.sync="drawer"
      direction="btt"
      :before-close="handleClose"
      size="600px"
      ref="eldrawer"
    >
      <EldrAwer :id="id" :updata="updata"></EldrAwer>
    </el-drawer>
  </div>
</template>

<script>
import EldrAwer from '@/views/components/publish-img.vue'
import { getUserCar, sellpersonalCar, removepersonalCar, cancelReserve } from '@/api/cart'
export default {
  name: 'CarInfo',
  components: {
    EldrAwer
  },
  data() {
    return {
      id: '',
      drawer: false,
      url: '',
      carlist: [],
      activeIndex2: '2',
      getUserCar: {
        stateCode: 2,
        pageNum: 1,
        pageSize: 50
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 取消预约
    async cancelreserve(i) {
      const data = cancelReserve({ car_id: i })
      console.log(data)
      data.then(a => {
        this.$message(a.data.msg)
        this.getList()
      })
    },
    // 卖出
    async sellper(i) {
      const data = sellpersonalCar({ id: i })
      data.then(a => {
        this.$message({
          type: 'success',
          message: a.data.msg
        })
        this.getList()
      })
    },
    // 下架
    async remove(i) {
      this.$confirm('是否确认删除下架?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          const data = removepersonalCar({ id: i })
          data.then(a => {
            this.getList()
            this.$message({
              type: 'success',
              message: a.data.msg
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 自定义事件
    updata() {
      this.drawer = false
      this.getList()
      this.$refs.eldrawer.closeDrawer()
    },
    // 点击显示抽屉
    visible(id) {
      this.id = id
      this.drawer = true
    },
    //
    async getList() {
      this.carlist = []
      const res = getUserCar(this.getUserCar)
      res.then(a => {
        this.carlist = a.data.data
        const resule = this.carlist[0]
        if (resule) {
          this.carlist = a.data.data.map(item => {
            item.car.photo = item.car.photo.split('#')
            return item
          })
        }
      })
    },
    // 切换导航
    handleSelect(index) {
      this.getUserCar.stateCode = index
      this.getList()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.image-slot {
  background-color: #f5f7fa;
  line-height: 200px;
  text-align: center;

  // display: block;
}
.buttondiv {
  height: 40px;
  padding-top: 100px;
}
.boder {
  border-bottom: 1px solid #eee;
}
.button {
  padding-top: 160px;
}
.carInfo {
  min-width: 500px;
}
.grid-content {
  padding: 25px;
  display: block;
  color: #666;
  span {
    color: red;
  }
}
</style>
